<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
	<style>
		.red {
			color: red;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="container">
			<!-- 顶部搜索框模块 -->
			<div class="form-group">
				<div class="input-group">
					<h4>品牌管理</h4>
				</div>
			</div>

			<!-- 数据表格 -->
			<table class="table table-bordered table-hover mt-2">
				<thead>
					<tr>
						<th>编号</th>
						<th>资产名称</th>
						<th>价格</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in list" :key="item.id">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>

						<!-- 如果价格超过100，就有red这个类 -->
						<td :class="{red: item.price > 100}">{{ item.price }}</td>
						<td> {{ item.time }}</td>
						<td><a href="#" @click.prevent="delItem(item.id)">删除</a></td>
					</tr>
					<tr style="background-color: #EEE" v-if="list.length !== 0">
						<td>统计:</td>
						<td colspan="2">总价钱为: {{ totalPrice }}</td>
						<td colspan="2">平均价: {{ averagePrice }}</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5" style="text-align: center" v-if="list.length === 0">暂无数据</td>
					</tr>
				</tfoot>
			</table>

			<!-- 添加资产 -->
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="资产名称" v-model="name" />
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="价格" v-model.number="price" />
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- 阻止表单提交 -->
				<button class="btn btn-primary" @click.prevent="addItem()">添加资产</button>
			</form>
		</div>
	</div>
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el: '#app',
			data: {
				name: "", // 名称
				price: "", // 价格
				list: [
					{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
					{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
					{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
					{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
				],
			},
			methods: {
				addItem() {
					if (this.name && this.price) {
						this.list.push({ id: this.list.length + 100, name: this.name, price: this.price, time: new Date() })
					} else {
						alert('资产名称和价格不能为空')
					}
				},
				delItem(id) {
					let idx = 100
					this.list = this.list.filter(item => item.id !== id)
					this.list.forEach((item, index) => {
						item.id = idx++
					});
				}
			},
			computed: {
				totalPrice() {
					return this.list.reduce((sum, item) => sum + item.price, 0)
				},
				averagePrice() {
					return (this.totalPrice / this.list.length).toFixed(2)
				}
			}
		})
	</script>


</body>

</html>